<template>
  <div>
    <app-header></app-header>
    <app-navbar></app-navbar>
    <app-main></app-main>
  </div>
</template>

<script>
// 会导入 ./AppHeader 下面的 index.vue组件
import AppHeader from "./AppHeader";
import AppNavbar from "./AppNavbar";
import AppMain from "./AppMain";

export default {
  data() {
    return {};
  },

  components: { AppHeader, AppNavbar, AppMain },

  methods: {}
};
</script>

<style scoped>
/* 头部区域 绝对布局 行高50px，距离上，左，右0px，背景色#2d3a4b*/
.header {
  position: absolute;
  line-height: 50px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #2d3a4b;
}
/* 左侧导航 绝对布局 宽度230px，距离上50px，左、下0px，y轴可以浮动扩展，背景色#545c64*/
.navbar {
  position: absolute;
  width: 230px;
  top: 50px;
  left: 0px;
  bottom: 0px;
  overflow-y: auto;
  background-color: #545c64;
}
/* 工作区 绝对布局 距离上50px，左230px，右、下0px，内间距10px，y轴可以浮动扩展，背景色red*/
.main {
  position: absolute;
  top: 50px;
  left: 230px;
  right: 0px;
  bottom: 0px;
  padding: 10px;
  overflow-y: auto;
  /* background-color: red; */
}
</style>